<template>
	<gzPageWrapper
		ref="gzPageWrapperRef"
		:styles="{ background: '#f7f8fb' }"
		:up="{ use: true, auto: false, textNoMore: '--暂无更多--', empty: { use: false } }"
		:down="{ use: true, auto: false }"
		:nav="{ use: false }"
		:scroll="{ top: 60, fixed: true }"
		@upCallback="upCallback"
	>
		<template #top>
			<!-- 查询按钮 -->
			<view class="header-wrap">
				<text class="title">历史福分</text>
				<view class="filter" @click="onOpen()">
					<uni-icons type="search" size="24"></uni-icons>
					<text>查询</text>
				</view>
			</view>
		</template>
		<template #default>
			<!-- 福分列表 -->
			<view class="list">
				<view class="item" v-for="item in vdata.scoreList">
					<view class="left">
						<view class="title">{{ item.jfbdyy }}</view>
						<view class="time">{{ item.operTime }}</view>
					</view>
					<view class="right">{{ item.jfbdz }}</view>
				</view>
			</view>
		</template>
		<gzListNull :list="vdata.scoreList"></gzListNull>
	</gzPageWrapper>
	<!-- 普通弹窗 -->
	<uni-popup ref="searchPopup" type="top">
		<view class="popup-content">
			<view class="item">
				<text>福分变动时间</text>
				<view class="time-wrap">
					<view class="time" @click="onOpenDate(true)">
						<text :style="vdata.queryParams.sTime?'':'color:#BBBBBB'">{{vdata.queryParams.sTime?vdata.queryParams.sTime:'开始时间'}}</text>
						<uni-icons type="down" color="#A0A9C0" size="20"></uni-icons>
					</view>
					<text class="to">至</text>
					<view class="time" @click="onOpenDate(false)">
						<text :style="vdata.queryParams.eTime?'':'color:#BBBBBB'">{{vdata.queryParams.eTime?vdata.queryParams.eTime:'结束时间'}}</text>
						<uni-icons type="down" color="#A0A9C0" size="20"></uni-icons>
					</view>
				</view>
			</view>
			<view class="bottom-wrap">
				<text class="reset" @click="()=>vdata.queryParams={}">重置</text>
				<text class="query" @click="onQuery">查询</text>
			</view>
		</view>
	</uni-popup>
	<!-- 日历 -->
	<uni-calendar ref="calendarRef" :insert="false" @confirm="onConfirmDate" />
	<!-- 授权登录弹窗 -->
	<gzLoginPopup ref="gzLoginPopupRef" v-model:isLogin="vdata.isLogin" @isLoginCallback="isLoginCallback"></gzLoginPopup>
</template>
<script setup>
	import { ref, reactive, nextTick, getCurrentInstance } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import storageManage from '@/util/storageManage.js'
	import { $socreHistory } from '@/http/apiManager.js'
	
	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties
	
	const gzPageWrapperRef = ref()
	const gzLoginPopupRef = ref()
	const searchPopup = ref()
	const calendarRef = ref()
	
	const vdata = reactive({
		isLogin: false,	// 用户是否登录
		queryParams: {
			sTime: '',
			eTime: ''
		},
		isStartDate: true,
		scoreList: [],	// 福分列表
	})
	onLoad(() => {
		vdata.isLogin = storageManage.isLogin()
		if(vdata.isLogin){	// 如果用户已登录直接拉取历史福分数据
			nextTick(() => {
				gzPageWrapperRef.value.getMescroll().resetUpScroll()
			})
		}else{	// 否则的话 打开登录弹框进行提示
			nextTick(() => {
				gzLoginPopupRef.value.open()
			})
		}
	})
	/**
	 * 登录回调
	 */
	const isLoginCallback = () => {
		if (vdata.isLogin) {	// 如果登录成功 则拉取 历史福分数据
			nextTick(() => {
				gzPageWrapperRef.value.getMescroll().resetUpScroll()
			})
		}else {
			$infoBox.toast('登录失败，无法获取历史福分！')
		}
	}
	/**
	 * 打开弹窗
	 */
	const onOpen = () => {
		searchPopup.value.open();
	}
	/**
	 * 打开日历
	 */
	const onOpenDate = (isStartDate) => {
		vdata.isStartDate = isStartDate
		calendarRef.value.open();
	}
	
	/**
	 * 日期选择
	 */
	const onConfirmDate = (result) => {
		if (vdata.isStartDate) {
			vdata.queryParams.sTime = result.fulldate
		} else {
			vdata.queryParams.eTime = result.fulldate
		}
	}
	/**
	 * 根据时间查询历史福分
	 */
	const onQuery = () => {
		gzPageWrapperRef.value.getMescroll().resetUpScroll()
		searchPopup.value.close();
	}
	
	/**
	 * 上拉刷新
	 */
	function upCallback(mescroll){
		if(!vdata.isLogin){	// 如果没有登录 则打开登录弹窗 不进行数据拉取
			mescroll.endErr()
			gzLoginPopupRef.value.open()
			return
		}
		const { num, size } = mescroll
		const pageNumber = num ? num : 1
		const pageSize = size ? size : 10
		$socreHistory({ ...vdata.queryParams, openid: storageManage.placeOpenId(), pageNumber, pageSize }).then(({ bizData }) => {
			if(pageNumber == 1) vdata.scoreList = []
			vdata.scoreList = vdata.scoreList.concat(bizData.records)
			mescroll.endSuccess(bizData.records.length,bizData.hasNext)
		}).catch(() => {
			mescroll.endErr()
		})
	}
</script>

<style lang="less" scoped>
	@page-backgroud: #f7f8fb; //页面背景色
	.header-wrap {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 2;
		box-sizing: border-box;
		padding: 0 30rpx;
		background-color: @page-backgroud;
	
		.title {
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			font-style: normal;
			flex-grow: 1;
		}
	
	
		.filter {
			display: flex;
			align-items: center;
			border-radius: 40rpx;
			background-color: white;
			padding: 8rpx 20rpx;
			border: 1rpx solid #C8C8C8;
	
			text {
				font-size: 26rpx;
				color: black;
				letter-spacing: 1px;
				margin-bottom: 2rpx;
			}
		}
	
	}
	
	.list{
		padding: 0 40rpx;
		box-sizing: border-box;
		width: 100%;
		display: flex;
		flex-direction: column;
		.item{
			padding: 40rpx 0;
			border-bottom: 1rpx solid #E6E6E6;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				display: flex;
				flex-direction: column;
				gap: 18rpx;
				.title{
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}
				.time{
					font-weight: 400;
					font-size: 24rpx;
					color: #A0A9C0;
				}
			}
			.right{
				font-weight: bold;
				font-size: 36rpx;
				color: #FF8833;
			}
		}
	}
	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 30rpx;
		font-size: 26rpx;
		background-color: white;
		border-radius: 0 0 20rpx 20rpx;
		letter-spacing: 1px;
		box-sizing: border-box;
		margin-top: 120rpx;
	
		.item {
			display: flex;
			flex-direction: column;
			font-size: 28rpx;
			margin-bottom: 30rpx;
			width: 100%;
	
			.input {
				border-radius: 40rpx;
				padding: 18rpx 30rpx;
				background-color: #F6F7FC;
				margin-top: 20rpx;
				font-size: 30rpx;
			}
	
			.time-wrap {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 20rpx;
	
				.time {
					border-radius: 40rpx;
					padding: 18rpx 30rpx;
					background-color: #F6F7FC;
					font-size: 30rpx;
					flex-grow: 1;
					display: flex;
					justify-content: space-between;
				}
	
				.to {
					margin: 0 20rpx;
				}
			}
	
		}
	
	
		.bottom-wrap {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 30rpx;
			margin-top: 30rpx;
			margin-bottom: 10rpx;
			width: 100%;
	
			.reset {
				color: black;
				border-radius: 40rpx;
				width: 25%;
				padding: 18rpx 0rpx;
				background-color: #F4F5F5;
				text-align: center;
				margin-right: 30rpx;
			}
	
			.query {
				color: white;
				border-radius: 40rpx;
				width: 75%;
				padding: 18rpx 0rpx;
				background-color: #24C789;
				margin-top: 30rpx;
				text-align: center;
				margin-bottom: 10rpx;
			}
		}
	
	}
	
</style>